<template name="home">
	<view class="">
		<img
			src="/static/img/bg.png"
			alt=""
			class="hubg"
		>
		<scroll-view
			scroll-y
			style="height:100%"
			class="home"
		>

			<view class="">
				<view class="toppart">
					<view class="top">
						<text>{{item.homeInfo.homeNumber}}</text>
					</view>
					<view class="bottom">
						<view class="l">
							<text>
								{{rud}}
							</text>
							<text>
								{{ruz}}{{rut}}
							</text>
						</view>
						<view class="m">
							住{{item.totalTime}}晚
						</view>
						<view class="r">
							<text>
								{{lid}}
							</text>
							<text>
								{{liz}}{{lit}}
							</text>
						</view>
					</view>
				</view>
				<view class="bottompart">
					<view class="top">
						<view class="l">
							<image
								src="/static/img/dingwei.png"
								mode=""
								class="dingwei"
							></image>
							<text>{{addressName}}</text>
						</view>
						<view class="r">
							<text>去导航</text>
							<image
								src="/static/img/dingjian.png"
								mode=""
								class="dingjian"
							></image>
						</view>
					</view>
					<view class="bottom">
						<view class="title">
							入住信息
						</view>
						<view
							class="info"
							v-for='(item,k) in item.tenantInfoList'
							:key="k"
						>
							<view class="">
								<text>入住人{{k+1}}：</text><text>{{item.tenantName}}</text>
							</view>
							<view class="">
								<text>证件类型：</text><text>二代身份证</text>
							</view>
							<view class="">
								<text>证件号码：</text><text>{{item.tenantIdCard}}</text>
							</view>
							<view class="">
								<text>手机号码：</text><text>{{item.tenantPhoneNumber}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="footer">
				<image
					src="/static/img/dianji.png"
					mode=""
					class="send"
					@click="camera"
				></image>

			</view>
		</scroll-view>
	</view>

</template>

<script>
	import amap from "../../components/amap-wx.js";
	import { mapState, mapMutations } from "vuex";
	import camera from "../../components/scan-frame/scan-frame.vue";
	import login from "../../components/login/login.vue";
	export default {
		name: "home",
		components: {
			camera,
			login
		},
		data() {
			return {
				amapPlugin: null,
				item: {},
				addressName: "",
				rud: "",
				ruz: "",
				rut: "",
				lid: "",
				liz: "",
				lit: "",
				latitude:'',
				longitude:''
			};
		},
		computed: {
			...mapState({
				user: "user"
			})
		},

		onShow() {},
		methods: {
			...mapMutations({
				setUser: "setUser"
			}),
			camera() {
				uni.navigateTo({
					url: "/pages/camera/camera?item=" + JSON.stringify(this.item),
					animationType: "slide-in-bottom"
				});
				this.maprestful(this.longitude, this.latitude, this.item.homeId);
			},

			maprestful(longitude, latitude, homeId) {
				this.$http
					.post(
						"/app/MapPositioning",
						this.$qs.stringify({
							longitude: longitude,
							latitude: latitude,
							homeId: homeId
						}),
						{
							header: {} /* 会覆盖全局header */,
							dataType: "json",
							responseType: "text"
						}
					)
					.then(res => {
						let data = res.data;

						if (data.code == 0) {
							uni.navigateTo({
								url: "/pages/camera/camera?item=" + JSON.stringify(this.item),
								animationType: "slide-in-bottom"
							});
						} else {
							uni.showToast({
								image: "/static/img/warn.png",
								title: data.msg,
								duration: 2000,
								mask: true
							});
						}
					})
					.catch(err => {});
			}
		},
		onLoad: function(options) {
			var item = JSON.parse(options.item);
			this.item = item;
			this.rud = this.$moment(item.entryTime).format("Do MMMM");
			this.ruz = this.$moment(item.entryTime).format("dddd");
			this.rut = this.$moment(item.entryTime).format("h:mm");
			this.lid = this.$moment(item.leaveTime).format("Do MMMM");
			this.liz = this.$moment(item.leaveTime).format("dddd");
			this.lit = this.$moment(item.leaveTime).format("h:mm");

			this.amapPlugin = new amap.AMapWX({
				key: "4d51e1f3b1788251346be629f6d48d83"
			});
			// uni.showLoading({
			// 	title: "获取信息中"
			// });
			uni.showLoading({
				title: "获取信息中",
				mask: true
			});
			this.amapPlugin.getRegeo({
				success: data => {
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
					this.addressName = data[0].name;
					this.latitude = data[0].latitude;
					this.longitude = data[0].longitude;

					// uni.hideLoading();
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		onPullDownRefresh() {
			this.amapPlugin = new amap.AMapWX({
				key: "4d51e1f3b1788251346be629f6d48d83"
			});
			uni.showLoading({
				title: "获取信息中",
				mask: true
			});
			this.amapPlugin.getRegeo({
				success: data => {
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
					setTimeout(function() {
						uni.stopPullDownRefresh();
					}, 500);
					
					this.addressName = data[0].name;
					this.latitude = data[0].latitude;
					this.longitude = data[0].longitude;

					// uni.hideLoading();
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	};
</script>

<style lang="scss">
	.home {
		padding: 10px;

		.toppart {
			padding: 20rpx;
			border-radius: 8px 8px 0 0;
			background: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 40px;

			.top {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 63rpx;
				width: 421rpx;
				background: #ffb06e;
				border-radius: 4px;
				color: white;
				margin-top: 10px;
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				margin-top: 20px;

				.l {
					display: flex;
					flex-direction: column;
				}

				.r {
					display: flex;
					flex-direction: column;
				}
				.m {
					background: #ffb06e;
					color: white;
					padding: 0px 4px;
					border-radius: 4px;
				}
			}
		}

		.bottompart {
			padding: 0 20px 20px 20px;
			border-radius: 0px 0px 8px 8px;
			background: white;
			margin-top: 10px;

			.top {
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 22px;
				padding: 20px 0 20px 0;

				.l,
				.r {
					display: flex;
					align-items: center;
				}
				.r {
					color: #ffb06e;
				}
				.dingwei {
					height: 20px;
					width: 20px;
					margin-right: 5px;
				}

				.dingjian {
					height: 8px;
					width: 8px;
					margin-left: 5px;
				}
			}
			.title {
				font-size: 20px;
				color: #7a7a7a;
				margin-top: 20px;
			}
			.info {
				padding: 20px;
				color: #757575;
				line-height: 20px;
			}
		}

		.footer {
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.send {
				width: 620rpx;
				height: 100rpx;
			}
		}
	}
	.hubg {
		position: fixed;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	}
</style>
